<template>

  <div class="flex gap-2" style="margin-bottom: 10px;">
    <el-tag type="primary" v-for="(item,index) in tit" :key="index" @click="dianji(index)"  class="pointer-on-hover">{{item}}</el-tag>
  </div>
  <div style="width: 100px"></div>
  <div v-if="props.isMemberUse" style="position: relative;border:0.5px solid #784c2c;border-radius:5px;width: 380px" >
    <ElInput
        v-bind="props"
        v-model="value"
        type="textarea"
        :autosize="autosize ? { minRows: 2 } : false"
    />


  </div>
  <div v-else style="width: 380px">
    <ElInput
        v-bind="props"
        v-model="value"
        type="textarea"
        :autosize="autosize ? { minRows: 2 } : false"
    />
  </div>


</template>

<script setup lang="ts">
import type { InputProps } from 'element-plus'
type Props = Partial<InputProps>
const props = withDefaults(defineProps<Props>(), {
  showWordLimit: true
})
const tit  = ref([])
const cont = ref([])
if(props.preset_key){
  tit.value = props.preset_key.split('&')
}
if(props.preset_value){
  cont.value = props.preset_value.split('&')
  console.log(cont)
}

const emit = defineEmits<{
  (event: 'update:modelValue', value: any): void
}>()

const value = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})

const dianji = (index) => {
  let value = cont.value[index]
  console.log(value)
  emit('update:modelValue', value)
}


</script>
<style lang="scss" scoped>
.pos {
  position: absolute;
  right: -2px;
  top: -5px;
  width: 28px;
  height: 17px;
}
.pointer-on-hover:hover {
  cursor: pointer;
}
</style>
